<template>
	<view class="content-container">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">我的设备</view>
			<view class="plus-icon-container">
				<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"
					@click="togglePlusMenu"></image>
				<view class="mask" v-if="showPlusMenu" @click="hidePlusMenu">
					<view class="plus-menu" @click.stop>
						<view class="menu-item" @click="changeDeviceInfo">更改信息</view>
						<view class="menu-item" @click="showClock">时间钟</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 圆环 -->
		<view class="content">
			<iCircle ref="circle" :name="name" :initVal="initVal" :unit="unit" :minVal="minVal" :maxVal="maxVal"
				:step="step" :action="action" :bgColor="'linear-gradient(to right, #f52ec7, #5175e9);'"
				:colorbefore="'linear-gradient(to right, #f51e34, #f52ec7);'"
				:colorafter="'linear-gradient(to right, #5175e9, #5175e9);'"></iCircle>
		</view>

		<!-- 设备 -->
		<view class="mode-list">
			<view class="mode-title">设备信息</view>
			<view class="mode-name">
				<view class="mode-name2">设备名：{{ device.deviceName }}</view>
				<view class="mode-name1">房间：{{ this.roomName }}</view>
			</view>

			<view class="mode-container" :class="{ 'actions-on': device.status }">
				<view class="mode-item">
					<view class="tP">
						<image :src="getDeviceIcon(device.deviceTypes)" class="mode-pic"></image>
						<!-- <image v-bind:src="`../../static/images/device/${device.deviceTypes}.png`" class="mode-pic"></image> -->
						<view class="types">{{device.deviceTypes}}</view>
					</view>
					<view class="mode-right">
						<view class="swiper-list">
							<switch :checked="device.status === 'true'" @change="toggleSwitch()" class="check" />
						</view>
					</view>
				</view>
			</view>

			<!-- 计时器 -->
			<view class="time-text" @click="showClock">{{countdownText}} </view>
		</view>

		<!-- 时间钟弹框 -->
		<ClockDialog v-if="showClockDialog" @confirm="handleClockConfirm" @close="showClockDialog = false">
		</ClockDialog>
		<!-- 更改设备信息弹框 -->
		<ChangeDeviceInfoDialog :visible="showChangeDeviceInfoDialog" :device="device"
			@confirm="handleDeviceInfoConfirm" @close="hideChangeDeviceInfoDialog">
		</ChangeDeviceInfoDialog>
		
	</view>
</template>


<script>
	import {
		listDevice,
		getDevice,
		addDevice,
		updateDevice,
		delDevice
	} from '@/api/device/device.js';
	import {
		getV
	} from '@/api/view/device_room.js';
	import {
		getRoom,
		delRoom,
		addRoom,
		updateRoom
	} from '@/api/room/room.js';
	import iCircle from '@/components/Draggable-circle/index.vue';
	import ClockDialog from '@/components/ClockDialog.vue';
	import ChangeDeviceInfoDialog from '@/components/ChangeDeviceInfoDialog.vue';


	export default {
		components: {
			iCircle,
			ClockDialog,
			ChangeDeviceInfoDialog
		},
		data() {
			return {
				device: {},
				deviceList: [],
				unit: '%',
				minVal: 1,
				maxVal: 100,
				name: '亮度',
				step: 1,
				initVal: 50,
				showPlusMenu: false,
				showClockDialog: false,
				showChangeDeviceInfoDialog: false,
				countdownText: '00:00:00',
				countdownTimer: null, // 用于保存当前的倒计时定时器
				roomName: ''
			};
		},
		methods: {
			prev() {
				uni.navigateBack({
					delta: 1 
				});
			},
			getRoomList() {
				getRoom().then(res => {
					console.log(res.rows);
					this.roomList = res.rows;
					// console.log(this.roomList);
					//找房间id相同的
					const currentRoom = this.roomList.find(room => room.roomId === this.device.roomId);
					if (currentRoom) {
						this.roomName = currentRoom.roomName;
					}
				});
			},
			action() {
				// #ifdef MP-WEIXIN
				console.log(this.rotVal);
				// #endif
				// #ifdef H5
				console.log(this.$refs.circle.rotVal);
				// #endif
			},
			togglePlusMenu() {
				this.showPlusMenu = !this.showPlusMenu;
			},
			hidePlusMenu() {
				this.showPlusMenu = false;
			},
			changeDeviceInfo() {
				this.showChangeDeviceInfoDialog = true;
				console.log(this.showChangeDeviceInfoDialog);
				this.showPlusMenu = false; // 隐藏弹窗
			},
			hideChangeDeviceInfoDialog() {
				this.showChangeDeviceInfoDialog = false;
			},
			handleDeviceInfoConfirm(updatedDevice1) {
				// 更新设备信息
				console.log("111", updatedDevice1);
				updateDevice(updatedDevice1).then(() => {});
				this.device = updatedDevice1;
				this.getRoomList();
				this.hideChangeDeviceInfoDialog();
			},
			showClock() {
				// console.log("显示时间钟");
				this.showPlusMenu = false; // 隐藏弹窗
				this.showClockDialog = true;
			},
getDeviceIcon(types) {
				// 返回房间图标的路径
				switch (types) {
					case '灯泡':
						return '../../static/images/device/dengpao.png';
					case '时钟':
						return '../../static/images/device/shizhong.png';
					case '床':
						return '../../static/images/device/chuang.png';
					case '风扇':
						return '../../static/images/device/fengshan.png';
					case '冰箱':
						return '../../static/images/device/bingxiang.png';
					case '马桶':
						return '../../static/images/device/matong.png';
					case '游戏手柄':
						return '../../static/images/device/shoubing.png';
					case '台灯':
						return '../../static/images/device/taideng.png';
					case '手机':
						return '../../static/images/device/shouji.png';
					case '电视':
						return '../../static/images/device/dianshi.png';
					case '锅':
						return '../../static/images/device/guo.png';
					case '插座':
						return '../../static/images/device/chazuo.png';
					case '插头':
						return '../../static/images/device/chatou.png';
					case '空调':
						return '../../static/images/device/kongtiao.png';
					default:
						return '../../static/images/device/qita.png';
				}
			},
			toggleSwitch() {
				event.stopPropagation(); // 阻止事件冒泡
				if (this.device.status === "true") {
					this.device.status = "false"
				} else {
					this.device.status = "true"
				}

				// 发射自定义事件并传递更新的设备对象
				this.update(this.device);
				console.log(this.device);
			},
			update(device) {
				updateDevice(device).then(() => {}).catch(error => {
					console.error('失败:', error.response ? error.response.data : error);
					uni.showToast({
						title: '失败，请重试',
						icon: 'none'
					});
				});
			},
			// 时间钟
			handleClockConfirm({
				status,
				time
			}) {
				this.showClockDialog = false;
				if (status === '开' || status === '关') {
					this.startCountdown(time, status);
				} else {
					this.countdownText = '';
					clearTimeout(this.countdownTimer, this.status);
					this.countdownTimer = null;
				}
			},
			startCountdown(time, status) {
				const [hours, minutes, seconds] = time.split(':').map(Number);
				let totalSeconds = hours * 3600 + minutes * 60;
				// 清除任何现有的倒计时
				if (this.countdownTimer) {
					clearTimeout(this.countdownTimer, this.status);
					this.countdownTimer = null;
					this.status = null;
				}

				const countdown = () => {
					if (totalSeconds > 0) {
						totalSeconds--;
						const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
						const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
						const s = String(totalSeconds % 60).padStart(2, '0');
						this.countdownText = `${h}:${m}:${s}   后  ${status} `;
						this.countdownTimer = setTimeout(countdown, 1000);
					} else {
						this.countdownText = '00:00:00';
					}
				};
				countdown();
			}
		},
		onLoad(options) {
			if (options.device) {
				// 解码传递过来的对象
				this.device = JSON.parse(decodeURIComponent(options.device));
			}
			this.getRoomList();
		}
	};
</script>

<style scoped>
	page {
		background-color: #f9f9f9;
	}

	.content-container {
		position: relative;
		z-index: 1;
		/* 主页面的 z-index */
	}

	.top {
		display: flex;
		align-items: center;
		height: 92rpx;
		background-color: white;
		padding: 14rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		width: 54rpx;
		height: 54rpx;
		object-fit: contain;
		margin-right: 16px;
		/* 调整间距 */
	}

	.myroom {
		flex: 1;
		font-size: 18px;
		color: #4e6490;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 50rpx;
		height: 60rpx;
		object-fit: contain;
		margin-right:30rpx;
		/* 调整间距 */
	}

	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		/* 确保遮罩层在主页面内容之上 */
	}

	.plus-menu {
		position: absolute;
		top: 76rpx;
		/* 调整菜单与图标的间距 */
		right: 17rpx;
		background-color: white;
		font-size: 28rpx;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		z-index: 1000;
		width: 20vw;
		z-index: 1001;
		/* 确保菜单在遮罩层之上 */
	}

	.menu-item {
		padding: 15rpx;
		border-bottom: 1rpx solid #eee;
		cursor: pointer;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
	}

	.mode-list {
		margin-top: 100rpx;
		margin-left: 45rpx;
		margin-right: 45rpx;
		background-color: #d2dbea;
		height: 670rpx;
		border-radius: 50rpx;
		/* 圆角 */

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* text-align: center; */
	}

	.mode-container {
		padding-top: 15rpx;
		/* border: 1px solid #b9b9b9; */
		border-radius: 10px;
		/*  margin-bottom: 10px; */
		height: 125px;
		padding-left: 12rpx;
		padding-right: 12rpx;
		/* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); */
		/* background-color: #f8f8f8; */
		position: relative;
	}

	/* .actions-on {
  background: linear-gradient(to left, rgba(81, 117, 233, 0.4), rgba(124, 215, 244, 0.5));
} */

	.mode-item {
		padding: 2rpx;
		display: flex;
		align-items: center;
	}

	.mode-title {
		font-size: 21px;
		font-weight: bold;
		padding-bottom: 59rpx;
		color: #4e6490;
	}

	.mode-name {
		font-size: 19px;
		margin-right: 292rpx;
		color: #4e6490;
		font-weight: bold;
		font-size: 33rpx;
	}

	.mode-name1 {
		margin-bottom: 60rpx;
	}

	.mode-name2 {

		margin-bottom: 60rpx;
		/* margin-left: 162px; */
	}

	/* .mode-pic {
		margin-top: -29rpx;
		height: 110rpx;
		width: 110rpx;
	}
	.types{
		font-size: 32rpx;
		padding-bottom: 32rpx;
	} */
	.tP {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mode-pic {
		width: 90rpx;
		height: 90rpx;
	}

	.types {
		margin-top: 35rpx;
		/* 调整此值以增加与图片的距离 */
		font-size: 34rpx;
		color: #4e6490;
		font-weight: bold;
	}

	.swiper-list {
		margin-left: 312rpx;
	}
	
	.content {
		padding-top: 86rpx;
		position: relative;
		z-index: 1;
		/* 圆环容器的 z-index */
	}

	.time-text {
/* margin-right: 242rpx; */
		font-size: 29px;
		text-align: center;
		color: #4e6490;
		font-weight: bold;
	}
</style>